import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import { colloct_list, colloct_cont } from '../../utils/api';
class Collect extends Component {
    state = {
        cloot_list: []
    }
    handleBack() {
        this.props.history.go(-1)
    }
    componentDidMount() {
        this.colo_list()
    }
    colo_list() {
        colloct_list({ params: { userid: localStorage.getItem("userid") } }).then(res => {
            console.log(res);
            this.setState({
                cloot_list: res.data.list
            })
        })
    }
    cloot_count(e) {
        console.log(111);
        colloct_cont({ userid: localStorage.getItem("userid"), goodid: e }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
                this.colo_list()
            }
        })
    }
    render() {
        return (
            <div className='collect'>
                <NavBar onBack={() => { this.handleBack() }}>
                    我的收藏
                </NavBar>
                {
                    this.state.cloot_list.map(item => {

                        return (
                            <div className='good' key={item.id}>
                                <div className='img-box'>
                                    <img src={item.pic} alt="" />
                                </div>
                                <div className='text'>
                                    <div className='name'>
                                        {item.name}
                                    </div>
                                    <div className="price">
                                        <span>活动价 {item.salesPrice.value}</span>
                                        <button onClick={() => {
                                            this.cloot_count(item.id)
                                        }}>取消收藏</button>
                                    </div>
                                </div>
                            </div>

                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(Collect);